<template>
  <div class="call-phone-component">
    <!-- 语音通话功能暂未实现 -->
    <el-dialog
      title="AI语音通话"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
    >
      <div class="call-content">
        <div class="call-icon">
          <i class="el-icon-phone"></i>
        </div>
        <div class="call-text">
          <p>AI语音通话功能正在开发中...</p>
          <p>敬请期待！</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CallPhone',
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    // 显示通话对话框
    showCallDialog() {
      this.dialogVisible = true;
    },
    
    // 隐藏通话对话框
    hideCallDialog() {
      this.dialogVisible = false;
    }
  }
}
</script>

<style scoped>
.call-phone-component {
  /* 组件样式 */
}

.call-content {
  text-align: center;
  padding: 20px;
}

.call-icon {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 16px;
}

.call-text p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.dialog-footer {
  text-align: center;
}
</style>
